<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
        .layui-table-cell {
            overflow: visible !important;
        }

        /* 设置下拉框的高度与表格单元相同 */
        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 30px !important;
        }
    </style>
</head>

<body>

    <table class="layui-hide layui-form" id="tableDemo" lay-filter="tableDemo"></table>
    <blockquote class="layui-elem-quote layui-quote-nm" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['layer', 'table', 'element', 'form'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格
                , form = layui.form;
            //监听地址选择操作
            form.on('select(selectDemo)', function (obj) {
                layer.tips(obj.elem.getAttribute('name') + '：' + obj.value + ' ' + obj.elem.getAttribute('dataId'), obj.othis);
            });
            //监听性别操作
            form.on('switch(sexDemo)', function (obj) {
                layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            });

            //执行一个 table 实例
            table.render({
                elem: '#tableDemo'
                , height: 332
                , url: './mock/demo1.json' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                    , { field: 'username', title: '用户名', width: 80 }
                    , { field: 'sign', title: '可编辑', edit: 'text', width: 80, sort: true }
                    , { field: 'city', title: '城市', width: 80 }
                    , { field: 'sex', title: '性别', width: 85, templet: '#switchTpl', unresize: true }
                    , { field: 'lock', title: '下拉框', width: 110, templet: '#selectTool', unresize: true }
                    , { fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barDemo' }
                ]]
            });
            //监听单元格编辑
            table.on('edit(tableDemo)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });
            //监听工具条
            table.on('tool(tableDemo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作');
                }
            });
        });
    </script>

    <script type="text/javascript">
        var cityArr = ['昆明', '长沙', '富源', '楚雄', '长春', '哈尔滨', '桂林'];
    </script>
    <script type="text/html" id="selectTool" desc="下拉选择器" intro="用到了layui模板（不能设置lay-ignore,否则监听不到事件）">
    <select name="city" dataId="{{d.id}}" lay-filter="selectDemo">
        {{# layui.each(cityArr, function(index, item){ }}
        <option {{ (d.city==item)?'selected' : '' }}>{{ item }}</option>
        {{# }); }}
    </select>
</script>

    <script type="text/html" id="switchTpl" desc="切换开关" intro="layui表单空间">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch"
           lay-text="女|男" lay-filter="sexDemo" {{ (d.id==10003)?'checked' : '' }}>
</script>

</body>

</html>